/*
 * @Date: 2023-05-25 11:20:38
 * @Description: 路由文件
 */

import React, {Fragment, memo, Suspense, useEffect} from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {tabPages, pages, animation, initPage} from '@/pages';
import {navigationRef} from './router';
// import { PortalRouteProvider } from '@/components/PortalRoot'
// import SplashScreen from 'react-native-splash-screen' // 启动屏

import {ImageBackground, Pressable, StatusBar, Text, View} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import styles from './styles';
// import { AMapSdk } from 'react-native-amap3d'
// import { AMAP_KEY } from '../config'
// import { actions, store, useSelector } from '../store'
// import PrivacyDialog from '@/components/PrivacyDialog'
// import { useDispatch } from 'react-redux'

// AMapSdk.init(AMAP_KEY)
const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();

function Lazy({render: Render, ...other}: any) {
  return (
    // <Suspense fallback={['CitySelect', 'Agreements'].includes(other.route.name) ? <></> : <Loading visible />}>
    <Suspense fallback={<></>}>
      {/* <PortalRouteProvider renderToRoute> */}
      <Render {...other} />
      {/* </PortalRouteProvider> */}
    </Suspense>
  );
}

function renderTabBar({state, descriptors, navigation, showRedPoint}: any) {
  return (
    <View style={styles.tabbarContainer}>
      {state.routes.map((route, index) => {
        const {options} = descriptors[route.key];
        const label = options.title;
        const tabbarIcon = options.tabBarIcon;
        const tabBarActiveTintColor = options.tabBarActiveTintColor;

        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
            canPreventDefault: true,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name, route.params);
          }
        };

        return (
          <Pressable onPress={onPress} style={styles.tabbarItem} key={index}>
            {tabbarIcon({focused: isFocused})}
            <Text
              style={[
                {
                  color: isFocused
                    ? tabBarActiveTintColor
                    : tabBarActiveTintColor.secondary,
                },
              ]}>
              {label}
            </Text>
          </Pressable>
        );
      })}
    </View>
  );
}

function AppTabs() {
  const {bottom} = useSafeAreaInsets();
  return (
    <Fragment>
      <StatusBar
        barStyle="dark-content"
        translucent
        backgroundColor={'transparent'}
      />
      <Tab.Navigator
        tabBar={(props: any) => renderTabBar({...props, showRedPoint: 0})}>
        {tabPages.map(item => {
          return (
            <Tab.Screen key={item.name} {...item}>
              {(props: any) => <Lazy {...props} render={item.render} />}
            </Tab.Screen>
          );
        })}
      </Tab.Navigator>
      <View style={{height: bottom, backgroundColor: '#FFFFFF'}} />
    </Fragment>
  );
}

const pagesKey = Object.keys(pages);

const Router = memo((props: any) => {
  return (
    <NavigationContainer ref={navigationRef}>
      <Stack.Navigator initialRouteName={props?.initPage || initPage}>
        {/* tab页面 */}
        <Stack.Screen
          name="Tab"
          component={AppTabs}
          options={{headerShown: false, animation: 'none'}}
        />
        {/* 其他页面 */}
        {pagesKey.map((item: any) => {
          return (
            <Stack.Screen
              key={item}
              name={item}
              options={{
                headerShown: false,
                animation,
                // presentation: item === 'CitySelect' || item === 'Agreements' ? 'fullScreenModal' : 'card',
                presentation: 'card',
              }}>
              {props => <Lazy {...props} render={pages[item]} />}
            </Stack.Screen>
          );
        })}
      </Stack.Navigator>
    </NavigationContainer>
  );
});

export default Router;
